<template>
	<a-tree-select
		style="width: 100%"
		:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
		:placeholder="placeholder"
		:tree-data="treeData"
		:tree-default-expanded-keys="treeDefaultExpandedKeys"
		:field-names="{ children: 'children', label: 'name', value: 'id' }"
		allow-clear
	/>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import bizUserApi from '@/api/biz/bizUserApi'

	const props = defineProps({
		modelValue: [String],
		placeholder: {
			type: String,
			default: '请选择组织'
		}
	})
	const treeData = ref([])
	const treeDefaultExpandedKeys = ref([])

	onMounted(() => {
		bizUserApi.userOrgTreeSelector().then((res) => {
			if (res !== null) {
				treeData.value = res
				// 默认展开2级
				treeData.value.forEach((item) => {
					// 因为0的顶级
					if (item.parentId === '0') {
						treeDefaultExpandedKeys.value.push(item.id)
						// 取到下级ID
						if (item.children) {
							item.children.forEach((items) => {
								treeDefaultExpandedKeys.value.push(items.id)
							})
						}
					}
				})
			}
		})
	})
</script>
